<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS精灵</title>

        <style>
            /* CSS精灵：将多个小图标合并制作到一张图片上，使用background-position属性单独显示其中一个，这样的技术叫做CSS精灵技术，也叫作CSS雪碧图
               CSS精灵可以减少HTTP请求数，加快网页显示速度。缺点也很明显：不方便测量、后期改动麻烦
            */
            .fd {
                /* 使用photosho中的切片工具得到小图标在图片中的位置以及宽高 */
                /* 绝对定位 非常重要 */
                position:absolute;
                top: 500px;
                left: 500px;
                width: 98px;
                height: 78px;
                border: 1px solid white;
                background-image: url(cssjl.jpg);
                background-position: -383px -289px;
            }
            .yhy {
                position:absolute;
                top:600px;
                left:510px;
                width: 116px;
                height: 104px;
                border: 1px solid white;
                background-image: url(cssjl.jpg);
                background-position: -223px -41px;
            }

            ul {
                list-style: none;
            }

            ul li {
                position: relative;
                padding-left: 10px;
            }

            i.xx {
                position: absolute;
                top:-1px;
                left:0;
                width: 25px;
                height: 24px;
                background-image: url(cssjl.jpg);
                background-position: -404px -415px;
            }
        </style>
    </head>
    <body>
        <i class="fd"></i>
        <i class="yhy"></i>

        <ul>
            <li><i class="xx"></i>列表项里的文字</li>
            <li><i class="xx"></i>列表项里的文字</li>
            <li><i class="xx"></i>列表项里的文字</li>
            <li><i class="xx"></i>列表项里的文字</li>
            <li><i class="xx"></i>列表项里的文字</li>
        </ul>
    </body>
</html>